import React, { useState, useEffect } from 'react';
import { Modal, Message, Table } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { getLocalUserInfo } from 'utils/util';
import service from 'service';
const { confirm } = Modal;
export const HomeContext = React.createContext({});

const fields = {
    id: '数据id',
    site: '网站名称',
    website: '网站地址',
    introduction: '网站简介',
    account: '注册账户',
    password: '加密密码',
    nickname: '账户昵称',
    associates: '关联的账户',
    status: '账户状态',
    remark: '备注',
    tags: '标签',
    createTime: '创建时间',
    updateTime: '更新时间',
}

const statusDirect = ['正常', '停用', '注销'];

export default (props) => {
    const [user, setUser] = useState(getLocalUserInfo()); // 用户信息
    const [list, setList] = useState([]); // 列表
    const [labels, setLabels] = useState([]); // 标签
    const [searchText, setSearchText] = useState(''); // 搜索关键字
    const [listStyle, setListStyle] = useState('card'); // 列表样式 [card:卡片, table:表格, list: 列表]
    const [record, setRecord] = useState(null); // 当前操作数据
    const [type, setType] = useState('add'); // 编辑类型 [add,edit,delete]

    // 编辑
    const [visible, setVisible] = useState(false); // 新增|编辑弹窗
    const addHandle = () => {
        setRecord(null)
        setVisible(true)
        setType('add')
    }
    const editHandle = (data) => {
        setRecord(data)
        setVisible(true)
        setType('edit')
    }
    const editOrAddHandleCancel = () => {
        setVisible(false);
        setType('add')
    }

    // 查看密码
    const [viewPassVisible, setViewPassVisible] = useState(false); // 查看密码
    const viewPassHandle = (data) => {
        setRecord(data)
        setViewPassVisible(true)
        setType('viewPass')
    }
    const viewPassHandleCancel = () => {
        setViewPassVisible(false)
        setRecord(null)
    }

    // 查看详情弹窗
    const [viewMoreVisible, setViewMoreVisible] = useState(false); // 查看更多
    const viewMoreHandle = (data) => {
        setRecord(data)
        setViewMoreVisible(true)
        setType('viewMore')
    }
    const viewMoreHandleCancel = () => {
        setViewMoreVisible(false)
        setRecord(null)
    }
    // 批量删除
    const [batchDeleteVisible, setBatchDeleteVisible] = useState(false); // 弹窗显示
    const [batchDeleteLoading, setBatchDeleteLoading] = useState(false); // 批量删除loading
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 批量选择key
    const [selectedRows, setSelectedRows] = useState([]); // 批量选择数据
    // 显示rowSelection
    const showBatchDeleteRowHandle = () => {
        setType('batchDelete');
    }
    // 关闭批量删除 (没有数据时点击按钮, 关闭批量删除)
    const showBatchDeleteRowHandleCancel = () => {
        setType('');
        setSelectedRowKeys([])
        setSelectedRows([])
    }
    // 显示批量删除二次确认对话框 (有数据时点击按钮, 弹窗确认显示是否要删除这些内容)
    const showBatchDeleteHandle = () => {
        setBatchDeleteVisible(true);
    }

    // 获取全部标签
    async function getLabels() {
        service.label.findAll().then(data => {
            setLabels(data)
        })
    }
    // 获取全部数据
    async function getList() {
        service.account.findAll()
            .then(data => {
                let temp = data.map(item => {
                    item.tags = JSON.parse(item.tags || [])
                    return item;
                })
                setList(temp);
            })
            .finally(() => {
                console.log('account-请求账户列表-请求完毕')
            })
    }
    // 删除一条数据
    const deleteHandle = (data) => {
        confirm({
            title: '确认要删除吗?',
            icon: <ExclamationCircleOutlined />,
            content: (
                <div style={{ fontSize: 12 }}>
                    <p>网站:<i style={{ fontStyle: 'italic' }}>{data.site}</i></p>
                    <p>地址:<i style={{ fontStyle: 'italic' }}>{data.website}</i></p>
                    <p>...</p>
                </div>
            ),
            okText: '确认',
            cancelText: '取消',
            onOk() {
                service.account.deleteOne({ id: data.id })
                    .then(result => {
                        if (result) {
                            Message.success('删除成功')
                            getList();
                        }
                    })
                    .catch(err => {
                        Message.error(err)
                    })
            },
            onCancel() {
                console.log('删除确认弹窗-点击取消');
            },
        });
    }

    const value = {
        // useState数据对
        user, setUser,
        labels, setLabels,
        list, setList,
        searchText, setSearchText,
        listStyle, setListStyle,
        type, setType,
        record, setRecord,

        visible, setVisible, addHandle, editHandle, editOrAddHandleCancel,
        viewPassVisible, setViewPassVisible, viewPassHandle, viewPassHandleCancel,
        viewMoreVisible, setViewMoreVisible, viewMoreHandle, viewMoreHandleCancel,
        // 请求方法
        getLabels,
        getList,
        deleteHandle,
        // 批量删除
        batchDeleteVisible, setBatchDeleteVisible,
        batchDeleteLoading, setBatchDeleteLoading,
        selectedRowKeys, setSelectedRowKeys,
        selectedRows, setSelectedRows,
        showBatchDeleteRowHandle, showBatchDeleteRowHandleCancel, showBatchDeleteHandle,
    }

    return value;
    // return (
    //     <HomeContext.Provider value={value}>
    //         {props.children}
    //     </HomeContext.Provider>
    // )
}